<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>脚本编辑</title>
    <script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
    <#include "/pubHeadStyleTree.html">
    <script src="${ctx}/formStatic/script/InitMirror.js"></script>
    <script src="${ctx}/formStatic/script/codemirror.js"></script>
</head>
<style>
    .comment_div {
        position: absolute;
        background-color: #fafafa;
        border: 1px solid #c9cfd6;
        width: 790px;
        height: 446px;
        top: 0;
        left: 47%;
        margin-left: -370px;
    }

    .top_div {
        height: 68%;
    }

    .bottom_div {
        height: 30%;
        font-size: 13px;
    }

    .top_left_div {
        margin: 5px;
        border: 1px solid #d2d2d2;
        height: 95%;
        float: left;
        width: 75%;
    }

    .top_right_div {
        margin: 5px;
        float: left;
        width: 160px;
        height: 95%;
        border: 1px solid #d2d2d2;
    }

    .l-tab-links {
        height: 42px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .l-tab-content {
        border: medium none;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
        margin-top: 2px;
    }

    .l-tab-links ul {
        left: 0;
        list-style: none outside none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        top: 0;
        width: 9999px;
    }

    .l-tab-links li {
        cursor: pointer;
        float: left;
        font-size: 13px;
        height: 42px;
        line-height: 47px;
        margin: 0 2px;
        overflow: hidden;
        position: relative;
        *margin-top: 10px;
    }

    .expre-ul {
        width: 99%;
        height: 246px;
        margin: 0;
        padding: 0;
        overflow: auto;
    }

    .title-div {
        line-height: 27px;
        font-size: 14px;
        font-weight: bold;
    }

    .calTool {
        margin: 3px;
        float: left;
        width: 40px;
        height: 40px;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        line-height: 38px;
        cursor: pointer;
    }

    .l-tab-links ul {
        left: 0;
        list-style: none outside none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        top: 0;
        width: 9999px;
        background: #ccc;
    }

    .toolbar_btn {
        background-position: 0 -80px;
        width: 80px;
        height: 30px;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
        margin: 3px 10px;
    }

    .layadmin-tabspage-none .layui-layout-admin .layui-header {
        position: absolute;
        top: -53px !important;
        display: none;
    }

    .layadmin-tabspage-none .layui-layout-admin .layui-body {
        position: absolute;
        top: 0;
    }

    .layui-table-body {
        overflow: hidden;
    }

    .layui-side .layui-side-menu {
        display: none;
    }
</style>
<div class="comment_div">
    <input type="hidden" id="parentName" name="parentName" value="${parentName}">
    <div style="height:400px;overflow-y:auto;">
        <div style="background: #ccc;height: 30px;line-height: 30px;font-size:14px;">脚本</div>
        <div class="top_div">
            <div class="top_left_div">
                <div title="脚本">
                    <ul id="scriptTree" class="ztree expre-ul"></ul>
                </div>
            </div>
            <div class="top_right_div">
                <div class="l-tab-links title-div">&nbsp;&nbsp;表达式运算符</div>
                <div id="tools_comment"></div>
            </div>
        </div>
        <div class="bottom_div">
            <div class="l-tab-links title-div">&nbsp;&nbsp;规则表达式</div>
            <textarea id="exp_text" codemirror="true" mirrorheight="51px" cols="110" rows="6"
                      style="display: none;"></textarea>
            <div class="CodeMirror-wrapping" style="position: relative;"><textarea tabindex="100000"
                                                                                   style="position: absolute; left: -10000px; width: 10px;"></textarea>
            </div>

        </div>
    </div>
    <div class="layui-form-item bottom_toolbar" style="z-index:10000">
        <span class="toolbar_btn" id="verification">验证表达式</span>
        <button style="float: right;margin:5px 10px 0 0" class="layui-btn layui-btn-sm layui-btn-danger" id="esc">
            取消
        </button>
        <button style="float: right;margin:5px 10px 0 0" class="layui-btn layui-btn-sm" id="determine">
            确定
        </button>

    </div>
</div>
<div class="verResults" hidden style="display:none">
    <div style="padding:20px 0">
        <div class="layui-form-item" style="border:1px solid #ccc;margin-bottom:0;border-bottom:none">
            <label class="layui-form-label" style="background: #ebebeb;">结果值类型: </label>
            <div class="layui-input-inline">
                <span id="resultType" style="line-height: 38px;margin-left:5px"></span>
            </div>
        </div>
        <div class="layui-form-item" style="border:1px solid #ccc;margin-bottom:0">
            <label class="layui-form-label" style="background: #ebebeb;">结果值: </label>
            <div class="layui-input-inline">
                <span id="result" style="line-height: 38px;margin-left:5px"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <button style="float: right;margin:5px 10px 0 0" class="layui-btn layui-btn-sm" id="returns"><i
                    class="layui-icon"></i>确定
            </button>
        </div>
    </div>
</div>
<script>
    var scriptObj = '${scriptObj}';
    layui.config({
        base: serverPath.systemPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'layer', 'jquery', 'form', 'setter'], function () {
        var table = layui.table,layer = layui.layer, $ = layui.$,form = layui.form,setter = layui.setter,dialog = frameElement.dialog; //调用页面的dialog对象(ligerui对象)
        var calTools = [{exp: 'like', title: 'like', msg: '类似'}, {exp: 'not', title: 'not', msg: '不是'},
                {exp: '||', title: 'or', msg: '或'}, {exp: '&&', title: 'and', msg: '并'},
                {exp: '!=', title: '!=', msg: '不等于'}, {exp: '=', title: '=', msg: '等于'},
                {exp: '<', title: '&lt;', msg: '小于'}, {exp: '>', title: '>', msg: '大于'},
                {exp: ')', title: ')', msg: '右括号'}, {exp: '(', title: '(', msg: '左括号'},
                {exp: '/', title: '÷', msg: '除'}, {exp: '*', title: '×', msg: '乘'},
                {exp: '-', title: '-', msg: '减'}, {exp: '+', title: '+', msg: '加'}],
            scriptTree, scriptTypes = [];

        function clickHandler() {
            var exp = $(this).attr("exp");
            InitMirror.editor.insertCode(exp);
        }

        $("#determine").on('click', function (e) {
            // 添加脚本的赋值
            var parentName = $("#parentName").val();
            if ('${param}' == "1") {
                var v = InitMirror.editor.getCode();
                if (parentName != "" && parentName != "undefined") {
                    var ifr = window.parent.frames[parentName];
                    var win = ifr.window || ifr.contentWindow;
                    win.document.getElementById(scriptObj).value = v;
                }
            } else if ('${param}' == "2") {
                var v = InitMirror.editor.getCode();
                if (parentName != "" && parentName != "undefined") {
                    var ifr = window.parent.frames[parentName];
                    var win = ifr.window || ifr.contentWindow;
                    win.document.getElementById("scriptID").value = v;
                }
            } else if ('${param}' == "3") {
                var v = InitMirror.editor.getCode();
                if(parent.InitMirror){
                    parent.InitMirror.editor.insertCode(v);
                }else{
                    layui.scriptText = v;
                }
            }
            parent.layer.close(index);
        });


        //初始化运算符工具窗口
        function initTools() {
            var tool;
            while (tool = calTools.pop()) {
                var div = document.createElement("div");
                div.title = tool.msg;
                div.innerHTML = tool.title;
                div.className = "calTool";
                div.setAttribute("exp", tool.exp);
                div.onclick = tool.clickHandler || clickHandler;
                $("#tools_comment").append(div);
            }
            $(".calTool").bind("mouseenter mouseleave", function () {
                $(this).toggleClass("tool-hover");
            });
            $(".toolbar_btn").bind("mouseenter mouseleave", function () {
                $(this).toggleClass("toolbar_btn_hover");
            });
        }

        $(function () {
            initTools();
            getScript();
        });

        //双击树添加内容到规则表达式
        function zTreeOnDblClick(event, treeId, treeNode) {
            var str = treeNode.varKey || treeNode.script;
            InitMirror.editor.insertCode(str);
        }

        //获取脚本数据
        function getScript() {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: serverPath.formPath + setter.formLinkPath + "script/list",
                success: function (result) {
                    showResult(result.data);
                }
            });
        }

        //判断是否已添加该脚本类型
        function hasExist(d) {
            for (var i = 0; i < scriptTypes.length; i++) {
                var type = scriptTypes[i];
                if (type.name == d) {
                    return type.id;
                }
            }
            return false;
        }

        //脚本数据返回结果，构建脚本树
        function showResult(result) {
            var setting = {
                data: {
                    key: {
                        name: "name"
                    },
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "category",
                        rootPId: 0
                    }
                },
                view: {
                    selectedMulti: false
                },
                callback: {
                    onDblClick: zTreeOnDblClick
                }
            };
            for (var i = 0; i < result.length; i++) {
                var script = result[i];
                var typeId = hasExist(script.category);
                if (typeId) {
                    script.category = typeId;
                } else {
                    scriptTypes.push({
                        name: script.category,
                        id: 0 - i - 1
                    });
                    script.category = 0 - i - 1;
                }
            }
            var type;
            while (type = scriptTypes.pop()) {
                result.push({
                    id: type.id,
                    name: type.name,
                    category: 0
                });
            }
            scriptTree = $.fn.zTree.init($("#scriptTree"), setting, result);
            scriptTree.expandAll(true);
        }

        //关闭子弹窗
        var index = parent.layer.getFrameIndex(window.name);
        $('#returns').click(function () {
            layer.close(layer.index);
        });
        //关闭本弹窗
        $('#esc').click(function () {
            parent.layer.close(index);
        });
        form.render();
        $("#verification").on('click', function () {
            $("#resultType").text("");
            $("#result").text("");
            layer.open({
                type: 1,
                area: ['400px', '213px'],
                title: ['对话框'],
                content: $(".verResults"),
                success: function (layero) {
                    var mask = $(".layui-layer-shade");
                    mask.appendTo(layero.parent());
                }

            });
            var script = InitMirror.editor.getCode();
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath + "script/getValidateResult",
                dataType: 'json',
                data: {"script": script},
                success: function (obj) {
                    if (component.filterRecord(obj)) {
                        $("#resultType").text(obj.data.resultType);
                        $("#result").text(obj.data.result);
                    }
                }
            })
        })
    });
</script>
</body>
</html>